// 一 . 获取所有分类, 铺设到下拉菜单中

function loadCateList() {
  axios
    .get('http://api-breakingnews-web.itheima.net/my/article/cates', {
      headers: {
        Authorization: localStorage.getItem('token'),
      },
    })
    .then(res => {
      console.log('分类', res.data.data)
      // 遍历
      let arr = res.data.data

      arr.forEach(obj => {
        var theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`
        $('select[name=cate_id]').append(theOption)
        // 让layui刷新一下form表单
        layui.form.render('select', 'edit')
      })
    })
}

loadCateList()

// 二. 初始化富文本
initEditor()

// 三. 集成图片裁剪的插件
let cropper
function initCropper() {
  // 1. 集成裁剪插件
  const image = document.getElementById('image') // 获取到要被添加裁剪插件的图片
  cropper = new Cropper(image, {
    aspectRatio: 1, // 横纵比例
    preview: $('.img-preview'),
  })
}
initCropper()

// 四. 获取图片
$('.select').on('click', () => {
  $('input[type=file]').click()
})
$('input[type=file]').on('change', e => {
  let url = URL.createObjectURL(e.target.files[0])
  cropper.replace(url)
})

// 五. 发布文章
$('.layui-form').on('submit', e => {
  e.preventDefault()

  //1. 标题   2. 分类
  let fd = new FormData($('.layui-form')[0])

  //3. 内容
  let htmlStr = tinyMCE.activeEditor.getContent()
  // 不要使用 append 已经 fd 初始化的时候,已经有了
  fd.set('content', htmlStr)

  //4. 图片 blob
  let canvas = cropper.getCroppedCanvas({
    width: 100,
    height: 100,
  })

  canvas.toBlob(function (blobObj) {
    // append 添加
    fd.append('cover_img', blobObj)

    fd.forEach((value, key) => {
      console.log(key, value)
    })
    // 发送请求
    axios
      .post('http://api-breakingnews-web.itheima.net/my/article/add', fd, {
        headers: {
          Authorization: localStorage.getItem('token'),
        },
      })
      .then(res => {
        console.log('发布文章', res.data)

        location.href = '../list/list.html'
      })
  })
})
